<template>
	<view class="content">
		<view style="padding: 20rpx 100rpx;">
			<button type="primary" v-for="(item, index) in positionList" :key="index" @click="setPositon(item)">{{item.title}}</button>
		</view>
		<view class="text-area">
			<xpj-floatNav :position="positionValue" :navList='navList' @click="clickItem"></xpj-floatNav>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [
					{title: '首页', name: 'home', disabled: false},
					{title: '新建', name: 'create', disabled: false},
					{title: '切换', name: 'change', disabled: false},
					{title: '返回', name: 'back', disabled: true},
				],
				positionList: [
					{title: '左上角', value: 'topLeft'},
					{title: '右上角', value: 'topRight'},
					{title: '左下角', value: 'bottomLeft'},
					{title: '右下角', value: 'bottomRight'},
				],
				positionValue: 'bottomRight'
			}
		},
		onLoad() {

		},
		methods: {
			clickItem(item) {
				console.log(item);
			},
			setPositon(item) {
				this.positionValue = item.value;
				console.log(this.positionValue);
			}
		}
	}
</script>
